<!DOCTYPE html>
<html class="x-admin-sm">
    {include file='public/header'}
    <script src="/admin/xadmin/lib/layui/upload.js" charset="utf-8"></script>

    <body>
        <div class="x-body">
            <form class="layui-form" lay-filter="formAjax">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>充值限制名称
                    </label>
                    <div class="layui-input-block">
                        <input type="text" name="recharge_name" id="recharge_name" placeholder="充值限制名称" required="required" lay-verify="required" autocomplete="off" class="layui-input" value=""/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>限制天数
                    </label>
                    <div class="layui-input-block">
                        <input type="number" name="recharge_day" id="recharge_day" lay-verify="required|num" placeholder="限制天数" required="required" autocomplete="off" class="layui-input" value=""/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>限制金额
                    </label>
                    <div
                        class="layui-input-block">
                        <!-- <input type="number" name="recharge_amount" id="recharge_amount" placeholder="限制金额" required="required" lay-verify="not_zero" autocomplete="off" class="layui-input" value=""/> -->

                        <input type="number" name="recharge_amount" id="recharge_amount" lay-verify="required|ZnNum" placeholder="限制金额" required="required" autocomplete="off" class="layui-input" value=""/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>限制集数
                    </label>
                    <div class="layui-input-block">
                        <input type="number" name="recharge_set" id="recharge_set" lay-verify="required|num" placeholder="限制集数" required="required" autocomplete="off" class="layui-input" value=""/>
                    </div>
                </div>

                <div class="layui-form-item" style="display: flex;">
                    <label class="layui-form-label">
                        白名单
                    </label>
                    <div id="applet" style="width: 100%;flex: 1;"></div>
                </div>

                <input type="hidden" name="recharge_white_ids">
                <input type="hidden" name="id" id="id" value=""/>
                <button id="submitData" class="layui-btn" lay-submit lay-filter="submitData" style="display: none;"/>
            </form>
        </div>
        <script>
            let params = {
                addUrl: '/admin/money/addRechargeTemplateLimit',
                editUrl: '/admin/money/updateRechargeTemplateLimit',
                detailUrl: '/admin/money/getRechargeTemplateLimitDetail'
            }
            form_ajax(params)
            let id = GetQueryString('id')


            // let selectParams1 = {
            //     url: '/admin/company/select?type=1',
            //     selected: [],
            //     tips: '选择公司',
            //     name: 'company_id',
            //     field_id: 'id',
            //     field_Name: 'name',
            //     elem: '#pCompany'
            // }


            let xmSelectAppletOption = {
                url: '/admin/company/select',
                initValue: '', // 初始值
                el: '#applet',
                showCount: 4,
                pageSize: 5,
                onFn: function (data) {
                    if (data.arr.length !== 0) {

                        let arr = data.arr.map(item => {
                            return item.id
                        })
                        $('input[name="recharge_white_ids"]').val(arr)

                    } else {
                        $('input[name="recharge_white_ids"]').val('')
                    }
                }

            }
            xmSelectA(xmSelectAppletOption)

            layui.use('form', function () {
                var form = layui.form;
                console.log(form);
                form.verify({

                    num: [/^[1-9]\d*$/, '只能输入整数！'],
                    ZnNum:[/^[0-9]+(\.[0-9]{2,2})?$/,'只能输入两位小数点的数字！']

                });

            });


            if (id) {
                Ajax(params.detailUrl, {
                    id
                }, 'get').then(result => {
                    let arr = result.data.recharge_white.map(item => { // console.log(item);
                        return item.company_id
                    })
                    xmSelectAppletOption.initValue = arr
                    $('input[name="recharge_white_ids"]').val(arr)
                    $('input[name="recharge_name"]').attr('disabled', true);
                    $('#recharge_name').css("background", "#CCCCCC");
                    $('#recharge_day').css("background", "#CCCCCC");
                    $('#recharge_amount').css("background", "#CCCCCC");
                    $('#recharge_set').css("background", "#CCCCCC");
                    $('input[name="recharge_name"]').css("cursor", "not-allowed")
                    $('input[name="recharge_day"]').attr('disabled', true);
                    $('input[name="recharge_amount"]').attr('disabled', true);
                    $('input[name="recharge_set"]').attr('disabled', true);
                    xmSelectA(xmSelectAppletOption)

                });
            } else {
                xmSelectA(xmSelectAppletOption)
            }
        </script>
    </body>

</html>
